<template>
    <div class="plan-main">
        <header><Topnav></Topnav></header>
        <div class="po-img">
            <img src="../../assets/img/motion/plan-1.png" alt="">
        </div>
        <h2 class="po-txth">今日训练课程</h2>
        <p class="po-txtp">OMINI核心训练课程</p>
        <i class="yo-ico po-yo">&#xe6cc;</i>
        <div class="title-one"><span>训练课程</span></div>
        <div class="calendar">
            <ul class="calendar-top">
                <li>今日</li>
                <li>六</li>
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
            </ul>
            <ul class="calendar-bottom">
                <li><span>12</span></li>
                <li><span>13</span></li>
                <li><span>14</span></li>
                <li><span>15</span></li>
                <li><span>16</span></li>
                <li><span>17</span></li>
                <li><span>18</span></li>
            </ul>
        </div>
        <div class="pro-list">
            <div>
                <img src="../../assets/img/motion/plan-2.png" alt="">
                <h2>OMIN核心训练课程</h2>
                <p>进行中<span>12:34:23</span></p>
                <i class="yo-ico pro-ico">&#xe6cc;</i>
            </div>
            <div>
                <img src="../../assets/img/motion/plan-3.png" alt="">
                <h2>OMIN上肢力量课程</h2>
                <p>已完成</p>
                <i class="yo-ico pro-ico">&#xe523;</i>
            </div>
            
        </div>

        <footer><Foot></Foot></footer>

    </div>
</template>


<script>
import Topnav from './motion'
import Foot from '../../component/BottomBar'
export default {
    components:{
        Topnav,
        Foot
    }
}
</script>


<style lang="stylus" scoped>

header 
    height 84px
    // flex 1
// footer 
    // flex 1

.plan-main
    // display flex
    // flex-direction column
    width 345px
    height 185px
    position relative
    .po-txth
        position absolute
        font-weight 700
        font-size 20px
        top 130px
        left 26px
    .po-txtp
        color #f5f5ef
        position absolute
        top 160px
        left 26px
        font-size 12px
    .po-yo 
        position absolute
        font-size 50px
        top 165px
        left 280px
        color #fd785a
    .title-one
        font-size 16px
        font-weight 600
        padding-left 12px
        margin-top 12px




.calendar-top,.calendar-bottom
    clear both
    width 345px
    margin 0 auto
    padding-left 16px 

    li
        float left
        width 45px
        height 30px
        line-height 30px
        text-align center
        margin-left 2px
        color rgba(204, 204, 204, 0.988235294117647)
        font-size 12px
.calendar-top
    li
        &:first-child
            font-weight bold
            color rgba(50, 49, 51, 0.99)
.calendar-bottom
    li
        color rgba(50, 49, 51, 0.988235294117647)
        span 
            display inline-block
            width 28px
            height 28px
            border-radius 50% 50%
        &:first-child 
            span
                background rgba(107, 92, 235, 1)
                color #fff


.pro-list
    margin-top 60px
    div 
        width 345px
        height 88px
        padding-left 12px
        position relative
        img 
            width 100%
            height 100%
        h2
            position absolute
            top 24px
            // background red 
            font-weight 700
            font-size 20px
            left 36px
        p 
            position absolute
            top 58px
            left 36px
            color #fff
            span 
                margin-left 12px
                color #ccc
    div+div 
        margin-top 20px   
.pro-ico
    position absolute
    font-size 50px
    top 10px
    left 260px
    color #fd785a


h2
    color #fff
</style>